<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炳公表白墙</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', sans-serif; }
        body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; }
        .container { max-width: 800px; width: 100%; background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; }
        .header { background-color: #4a6fa5; color: white; padding: 20px; text-align: center; position: relative; }
        .header h1 { font-size: 28px; margin-bottom: 5px; }
        .header p { font-size: 14px; opacity: 0.9; }
        .message-list { max-height: 400px; overflow-y: auto; padding: 15px; }
        .message { background-color: #f9f9f9; border-radius: 8px; padding: 12px; margin-bottom: 10px; border-left: 4px solid #4a6fa5; animation: fadeIn 0.5s ease-in-out; }
        .message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
        .message-name { font-weight: bold; color: #4a6fa5; }
        .message-time { font-size: 12px; color: #888; }
        .message-content { line-height: 1.5; word-break: break-word; }
        .form-container { padding: 15px; border-top: 1px solid #eee; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
        .form-control { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; transition: border-color 0.3s; }
        .form-control:focus { outline: none; border-color: #4a6fa5; }
        .btn { background-color: #4a6fa5; color: white; border: none; padding: 10px 15px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; width: 100%; }
        .btn:hover { background-color: #3a5ca5; }
        .warning { background-color: #fff8e1; border-left: 4px solid #ffb300; padding: 10px; margin: 10px 0; border-radius: 4px; display: none; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .loading { text-align: center; padding: 10px; color: #888; display: none; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>炳公表白墙</h1>
            <p>在这里，说出你不敢说的话</p>
        </div>
        
        <div class="message-list" id="messageList">
            <div class="message">
                <div class="message-header">
                    <span class="message-name">示例用户</span>
                    <span class="message-time">2023-07-20 14:30:22</span>
                </div>
                <div class="message-content">正在加载最新表白消息...</div>
            </div>
        </div>
        
        <div class="form-container">
            <div class="form-group">
                <label for="name">你的名字</label>
                <input type="text" class="form-control" id="name" placeholder="输入你的名字，可不填">
            </div>
            
            <div class="form-group">
                <label for="content">表白内容</label>
                <textarea class="form-control" id="content" rows="3" placeholder="写下你想对TA说的话..."></textarea>
            </div>
            
            <div class="warning" id="warning">
                <strong>注意！</strong> 检测到特殊名字，再喜欢就给你曝光了 - 邪恶的作者
            </div>
            
            <button class="btn" id="submitBtn">提交表白</button>
        </div>
    </div>

    <script>
        // 使用免费实时数据库（无需注册）
        const databaseUrl = 'https://lovewall-demo-default-rtdb.firebaseio.com/messages.json';
        
        // 加载消息
        async function loadMessages() {
            try {
                const response = await fetch(databaseUrl);
                const messages = await response.json();
                
                const messageList = document.getElementById('messageList');
                messageList.innerHTML = '';
                
                if(messages) {
                    Object.values(messages).reverse().forEach(msg => {
                        const messageEl = document.createElement('div');
                        messageEl.className = 'message';
                        messageEl.innerHTML = `
                            <div class="message-header">
                                <span class="message-name">${msg.name || '匿名用户'}</span>
                                <span class="message-time">${msg.time || '刚刚'}</span>
                            </div>
                            <div class="message-content">${msg.content}</div>
                        `;
                        messageList.appendChild(messageEl);
                    });
                }
            } catch (err) {
                console.error('加载消息失败:', err);
            }
        }
        
        // 提交消息
        async function handleSubmit() {
            const name = document.getElementById('name').value.trim() || '匿名用户';
            const content = document.getElementById('content').value.trim();
            
            if (!content) {
                alert('请输入表白内容');
                return;
            }
            
            // 检测特殊名字
            if (name.includes('严紫萱') || content.includes('严紫萱')) {
                document.getElementById('warning').style.display = 'block';
                setTimeout(() => {
                    document.getElementById('warning').style.display = 'none';
                }, 3000);
            }
            
            const message = {
                name: name,
                content: content,
                time: new Date().toLocaleString()
            };
            
            try {
                await fetch(databaseUrl, {
                    method: 'POST',
                    body: JSON.stringify(message)
                });
                
                document.getElementById('content').value = '';
                loadMessages();
            } catch (err) {
                alert('提交失败，请稍后再试');
                console.error('提交失败:', err);
            }
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadMessages();
            document.getElementById('submitBtn').addEventListener('click', handleSubmit);
            
            // 每3秒刷新一次（简易实时更新）
            setInterval(loadMessages, 3000);
        });
    </script>
</body>
</html>
